<%@page import="java.text.SimpleDateFormat"%>
<%@page import="com.wanmait.cookBook.vo.Comment"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.wanmait.cookBook.vo.Pager"%>
<%@page import="com.wanmait.cookBook.vo.Userinfo"%>
<%@page import="com.wanmait.cookBook.vo.FoodDetails"%>
<%@page import="com.wanmait.cookBook.vo.Cook"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String path = request.getContextPath(); %>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>  
<!-- 好看弹窗 --> 
<link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script> 
<!-- 好看弹窗 --> 
<meta name="keywords" content="巴沙鱼番茄汤,巴沙鱼番茄汤的做法,巴沙鱼番茄汤的家常做法,巴沙鱼番茄汤怎么做,巴沙鱼番茄汤的做法步骤,巴沙鱼番茄汤的最正宗做法,巴沙鱼番茄汤怎么做好吃" />
<meta name="description" content="1.材料准备好；番茄清洗干净，选成熟度好的番茄，肉厚汁多，口感酸甜；巴沙鱼柳一般为冰冻的，需要提前取出室温下解冻。2.番茄切块，是否去皮可随意。3.巴沙鱼切粗条，放少许淀粉，抓捏均匀；4.炒锅中倒少许……" />
<meta name="renderer" content="webkit">
<meta http-equiv="mobile-agent" content="format=xhtml; url=https://m.meishichina.com/recipe/556348/">
<link rel="alternate" media="only screen and (max-width: 640px)"  href="https://m.meishichina.com/recipe/556348/">
<link rel="shortcut icon" href="https://static.meishichina.com/v6/img/lib/f.ico"/>
<link rel="apple-touch-icon" href="https://static.meishichina.com/v6/img/lib/wapico.png" />
<link rel="stylesheet" type="text/css" href="https://static.meishichina.com/v6/css/lib/all3.css?v1=2017-10-24">
<link rel="stylesheet" type="text/css" href="https://static.meishichina.com/v6/css/app/newrecipe/recipe_newone.css?v1=2019-05-07">
<link rel="stylesheet" type="text/css" href="https://static.meishichina.com/v6/css/lib/comment.css?v1=2015-07-16">
<script type="text/javascript" src="https://static.meishichina.com/v6/js/lib/dfp-content-5.js"></script>
    <script type="text/javascript" src="<%=path%>/front/js/jquery-3.5.0.min.js"></script>

<!-- 导入评论区的一些样式 -->
<link rel="shortcut icon" href="//static.meishichina.com/v6/img/lib/f.ico"/>
<link rel="apple-touch-icon" href="//static.meishichina.com/v6/img/lib/wapico.png" />
<link rel="stylesheet" type="text/css" href="//static.meishichina.com/v6/css/lib/all.css?v1=8">
<link rel="stylesheet" type="text/css" href="//static.meishichina.com/v6/css/lib/cms.css?v1=2018-10-09">
<script type="text/javascript" src="//static.meishichina.com/v6/js/lib/dfp-list-5.js"></script>


<link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
<script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>


<style>
.comment-post-tools .comment-btn{background: #ff6767}
.comment-nav{border-left: 2px solid #ff6767;}
</style>
</head>
<body>
<!-- 引入head -->
<div  style="clear:both;">
<jsp:include page="/front/head.jsp"></jsp:include>
</div>
<div class="right" id="J_top_bar_user"></div>				
</div>
<!-- logo+nav -->
<div class="w logo_wrap2" style="margin-top:10px;height:60px;padding:0;margin-bottom:10px;">
	<div class="logo_inner left">
		<a href="" title="美食天下">美食天下</a>
	</div>
	<div class="logo_current left">
		<h1><a href="" title="菜谱">菜谱</a></h1>
	</div>
<div class="logo_search right">
<div class="searchBox J_search"><a href="javascript:;" title="搜索" class="search_Btn J_searchBTN right" id="search">搜索</a><input type="text" id="q" class="search_Text J_searchTxt right">
</div>
	</div>
	<div class="logo_nav">
	<a  href="">菜谱首页<i></i><b></b></a>
	<a class=on href="">分类<i></i><b></b></a>
	<a  href="">菜单<i></i><b></b></a>
	<span style="float: left; height:18px; margin:23px 4px 0; border-right: 1px solid #ddd;"></span>
	<a target="_blank" href="" title="食材">食材</a>
	</div>
</div>

<div class="w mt10 clear">
<iframe width="100%" height="90" frameborder="0" scrolling="no" src="https://static.meishichina.com/v6/h5/t1_1.html?v=2"></iframe>
</div>
<div class="showPersonalCook" style="width:990px;overflow:hidden; margin:0 auto;">
<div class="userTop clear">
<%Cook cook = (Cook)request.getAttribute("cook"); %>
	<div style="font-size:35px;font-weight:600;float:left;"><span><%=cook.getCookName() %></span></div>
	<div style="float:left;margin-left:700px;">
		<img src="<%=path %>/front/userImages/1.jpg" />
		<span class="userName" id="recipe_username"><%=cook.getUserinfo().getUserName()%></span>
	</div>
</div> 
			<div class="space_box_home">
					
			<div class="recipDetail">
						
			<input type="hidden" id="recipe_id" value="556348">
			<input type="hidden" id="recipe_uid" value="7513584">
			<input type="hidden" id="recipe_title" value="巴沙鱼番茄汤">
			<div class="recipe_De_imgBox" id="recipe_De_imgBox">
			<a class="J_photo" title="巴沙鱼番茄汤的做法"><span></span><img src="<%=path %>/front/cookFaceImage/<%=cook.getCookPicture() %>" alt="巴沙鱼番茄汤的做法"> </a>
			<p class="J_photo">
				<span class="De_bg">&nbsp;</span>
				<span class="De_photo">4张图片</span>
			</p>
			</div>		 
				<blockquote class="block_txt" id="block_txt">
				<div id="block_txt1"><span class="txt_tart">“</span><%=cook.getCookIntroduce() %><span class="txt_end">” </span>
				</div>
			</blockquote>
<div class="mo mt20">
<h3>食材明细</h3>
</div>
 
 
 <fieldset class="particulars">
	<legend>食材和用量</legend>

<div class="recipeCategory_sub_R clear">
	<ul>
		<%for(FoodDetails foodDetails:cook.getAllFoodDetails()){%>
		<li>
			<span class="category_s1" ><%=foodDetails.getFoodName() %></span>
			<span class="category_s2"><%=foodDetails.getFoodLevel() %></span>
		 </li>
		 <%} %>
	 </ul>
</div>
</fieldset>
      <div class="recipeCategory_sub_R mt30 clear">
<ul>
<li>
<span class="category_s1">
	<%=cook.getTaste().getTasteName() %>
	</span>
<span class="category_s2">口味</span>
</li>
<!-- 难易程度 -->
<li>
<span class="category_s1">
	<%switch(cook.getDifficultyLevel()){
		case(1):
			%>简单<% break;
		case(2):
			%>初级<% break;
		case(3):
			%>中级<% break;
		case(4):
			%>高级<% break;
		}%>
</span>
<span class="category_s2">难度</span>
</li>
</ul>
</div>
					
<div class="mo mt20">
<h3><%=cook.getCookName() %>的做法步骤</h3>
</div>	
<div style="font-size:16px;" > 
“<%=cook.getCookStep() %>”	
</div>		
 </div>
	  
<div class="recipeArction mt10 clear">
<ul class="collect_da">
<li class="lik"><a title="点赞" href="javascript:void(0);" class="J_lik" data=""><i></i><span class="likeSpan"><%=(Integer)request.getAttribute("cookLikeCount")%></span>人点赞</a></li>
<li class="fav"><a title="收藏" href="javascript:void(0);" class="J_fav" data=""><i></i><span class="collectSpan"><%=(Integer)request.getAttribute("cookCollectCount")%></span>人收藏</a></li>
<li class="com"><a title="评论" href="javascript:void(0);" class="J_com" data=""><i></i><span class="commentSpan">0</span>人评论</a></li>
</ul>				 
</div>
</div>
<!-- 点赞加事件 -->
<script type="text/javascript">
	$(function(){
		$(".J_lik").click(function(){
			//先判断用户是否登录
			 var loginuser = "<%=(Userinfo)session.getAttribute("loginuser")%>";
			 var cookId = "<%=cook.getId()%>";
			if("null"==loginuser)//js是否为空比较 "null"
			{
				location.href  = "<%=path%>/front/login.jsp";
				return;
			}
				$.ajax({
					url:"<%=path%>/LikeServlet",
					type:"get",
					data:{action:"addLike",cookId:cookId},
					async:false,
					success:function(mes){
						var str = mes.split(",");
						//alert(str[0]);//标记
						//alert(str[1]);//重新获得点赞数
						if(str[0]==1)swal("点赞成功");
						if(str[0]==2)swal("取消点赞成功");
						$(".likeSpan").html(str[1]);
					}
				});
		});
	});
</script>
<!-- 收藏加事件 -->
<script type="text/javascript">
	$(function(){
		$(".J_fav").click(function(){
			//先判断用户是否登录
			 var loginuser = "<%=(Userinfo)session.getAttribute("loginuser")%>";
			 var cookId = "<%=cook.getId()%>";
			if("null"==loginuser)//js是否为空比较 "null"
			{
				location.href  = "<%=path%>/front/login.jsp";
				return;
			}
				$.ajax({
					url:"<%=path%>/CollectServlet",
					type:"get",
					data:{action:"addCollect",cookId:cookId},
					async:false,
					success:function(mes){
						var str = mes.split(",");
						//alert(str[0]);//标记
						//alert(str[1]);//重新获得收藏数
						if(str[0]==1)swal("收藏成功");
						if(str[0]==0)swal("取消 收藏成功");
						$(".collectSpan").html(str[1]);
					}
				});
		});
	});
</script>



<!--------评论在线编辑器 ---------->
<div style="clear:both;">
	<textarea id="content"  name="content" ></textarea>
	<input type="button" id="addComment" value="发布评论" style="margin:10px 0; margin-left:930px;">
</div>


<!-- 将文本域的内容替换成在线编辑器 -->
<!-- 先导入config.js 是在线编辑器的配置文件-->
<script type="text/javascript" src="<%=path %>/front/ueditor3/ueditor.config.js"></script>
<!-- all.js是在线编辑器的代码 --><!-- all.js使用了config.js文件中的内容 -->
<script type="text/javascript" src="<%=path %>/front/ueditor3/ueditor.all.js"></script>

<!-- 调用导入的all.js文件中的方法将文本域替换成在线编辑器 -->
<script type="text/javascript">
	$(function(){		
		var items = {
				initialFrameWidth:990,//在线编辑器的宽度和高度
				initialFrameHeight:200,
				toolbars:[['source','bold','|','underline','forecolor','map','emotion','undo','redo','indent','insertimage','map',],['simpleupload','forecolor','backcolor','scrawl','justifyleft', ]]//工具栏 有2行
					}
		editor = UE.getEditor("content",items);
		//实现文件上传 将jsp->lib->5个文件复制到web-INF->lib文件夹下
		//修改config.json  imageUrlPrefix//项目名称 imagePathFormat//文件夹
		//在线编辑器中的图片上传到了tomcat中的commentImage文件夹中
	});
</script>
  <!-- 提交评论事件 -->
<script type="text/javascript">
	$(function(){
		$("#addComment").click(function(){
			 var loginuser = "<%=(Userinfo)session.getAttribute("loginuser")%>";
			 var cookId = "<%=cook.getId()%>";
			 var content = editor.getContent();
			 
			if("null"==loginuser)//js是否为空比较 "null"
			{
				location.href  = "<%=path%>/front/login.jsp";
				return;
			}
			if(content=="")
			{
			 	swal("评论不能为空呦~");	
			}
			if(content!="")
			{
				$.ajax({
					url:"<%=path%>/CommentServlet",
					async:false,
					data:{cookId:cookId,content:content,action:"addCookComment"},
					type:"post",
					success:function(mes)
						{
							$("#commentCook").html(mes);
						}
				});//ajax结束
			}
			
		});//点击事件结束
	})
</script>
<!-- ------------------- -->

<div id="commentCook">
<!-- 评论区 -->
<div class="ui_title_wrap clear" style="margin-bottom:20px">

<!-- 获取评论数量 -->
<% int count = (int)request.getAttribute("count"); %>
<h3 class="on"><a order="hot" data="0" page="2" href="">|最新评论</a></h3>
<h3 class=""><a order="hot" data="0" page="2" href="">(<%=count%>条)</a></h3>
</div>	
		
		<% ArrayList<Comment> getAllCookComment = (ArrayList<Comment>)request.getAttribute("getAllCookComment"); %>
		<%if(count==0)
		{
		%>
			<div id="arInfo" style="margin-top">						
			  	 <span ><font size="4">快来发布第一条评论吧~</font></span>  				            						
			 </div>		
		<%			
		}%>
		<%for(Comment comment:getAllCookComment)
		{
		%>
		
				<!-- 时间 -->
				
					<div id="arInfo" style="margin-top">						
						 <a> <img width="40px" height="40px" style="border-radius:30px;" src="<%=path%>/front/userImages/<%=comment.getFromUser().getUserFace()%>"></a>
						 <span ><a href=""><font size="4"><%=comment.getFromUser().getUserName() %></font> </a></span>  
							<% SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
				 			 String time = format.format(comment.getCommentTime());%> 
		      				 <%=time %>
						<span style="margin-right:10px"><a  commentId="<%=comment.getId()%>" class="replay" href="javascript:void(0)">回复</a></span>			            						
					</div>		
				<!-- 内容 -->	
				<%if(comment.getToUser().getUserName()!=null)
				{
				%>
					<div class="content 224252">
						<p><font size="3"><%=comment.getFromUser().getUserName()%>回复<%=comment.getToUser().getUserName()%>:<%=comment.getCommentContent() %></font></p>
					</div>
				<% 	
				}
				%>
				<%if(comment.getToUser().getUserName()==null) 
				{
				%>
						<div class="content 224252">
							<p><font size="3"><%=comment.getCommentContent() %></font></p>
						</div>
				<% 
				}
				%>	
					<!-- 在线回复 -->
							<div class="onlineReplay" style="display:none">
								<div style="clear:both;">
									<textarea id="<%=comment.getId() %>" name="replayContent" ></textarea>
									<input commentId=<%=comment.getId() %> toUser=<%=comment.getFromUser().getId() %> type="button" class="addReplay" value="回复" style="margin:10px 0; margin-left:930px;">
								</div>							
							</div>
					<hr>	
		<% 	
		} 
		%>
	
	<%-- 
	<!-- 调用导入的all.js文件中的方法将文本域替换成在线编辑器 -->
	<script type="text/javascript">
	$(function(){
		var items = {
				initialFrameWidth:990,//在线编辑器的宽度和高度
				initialFrameHeight:200,
				toolbars:[['source','bold','|','underline','forecolor','map','emotion','undo','redo','indent','insertimage','map',],['simpleupload','forecolor','backcolor','scrawl','justifyleft', ]]//工具栏 有2行
					}
		ReplayEditor = UE.getEditor("replayContent",items);
		//实现文件上传 将jsp->lib->5个文件复制到web-INF->lib文件夹下
		//修改config.json  imageUrlPrefix//项目名称 imagePathFormat//文件夹
		//在线编辑器中的图片上传到了tomcat中的commentImage文件夹中
	});
</script>
--%>
	<!-- 给回复增加事件 -->
<script type="text/javascript">
$(function(){
	$(".replay").click(function(){
		$(".onlineReplay").css("display","none");
		var commentId = $(this).attr("commentId");
		$(this).parent().parent().next().next().css("display","block");
		//替换在线编辑器
		
		var items = {
				initialFrameWidth:990,//在线编辑器的宽度和高度
				initialFrameHeight:200,
				toolbars:[['source','bold','|','underline','forecolor','map','emotion','undo','redo','indent','insertimage','map',],['simpleupload','forecolor','backcolor','scrawl','justifyleft', ]]//工具栏 有2行
					}
		ReplayEditor = UE.getEditor(commentId,items);
		
	
	});//点击回复事件结束
})

 //发布回复
 $(function(){
	 $(".addReplay").click(function(){
		 var loginuser = "<%=(Userinfo)session.getAttribute("loginuser")%>";
		 var cookId = "<%=cook.getId()%>";
		 var content = ReplayEditor.getContent();
		 var toUser = $(this).attr("toUser");
		if("null"==loginuser)//js是否为空比较 "null"
		{
			location.href  = "<%=path%>/front/login.jsp";
			return;
		}
		if(content=="")
		{
		 	swal("评论不能为空呦~");	
		}
		if(content!="")
		{
			$.ajax({
				url:"<%=path%>/CommentServlet",
				async:false,
				data:{cookId:cookId,content:content,action:"cookReplay",toUser:toUser},
				type:"post",
				success:function(mes)
					{
						$("#commentCook").html(mes);
					}
			});//ajax结束
		}	 
	 });//点击按钮结束
 })
</script>	
<!-- -------------------分页------------------- -->
				<div class="ui-page mt20"  id="pagerpager">
				<div class="ui-page-inner" id="pagerxx">	
					<% Pager pager = (Pager)request.getAttribute("pager"); %>
					<a href="<%=path%>/ShowPersonalCookServlet?pageNo=<%=pager.getPageNo()-1%>&cookId=<%=cook.getId()%>">上一页</a>
				
					<% for(int i =1;i<=pager.getPageCount();i++)
					{
					%>	
							<a class="no<%=i%>" href="<%=path%>/ShowPersonalCookServlet?cookId=<%=cook.getId()%>&pageNo=<%=i%>"><%=i%></a>
					<%
					}
					%>				
						<a href="<%=path%>/ShowPersonalCookServlet?pageNo=<%=pager.getPageNo()+1%>&cookId=<%=cook.getId() %>">下一页</a>	
				</div>
				</div>
		</div>		
<!-- 改变颜色的事件 -->
<script type="text/javascript">
	$(function(){
		$(".no<%=pager.getPageNo()%>").css("color","red");
	})
</script>
<div style="clear:both;">
</div>



<!-- footer -->
<jsp:include page="/front/footer.jsp"></jsp:include>
</body></html>	
